import React, { FC } from 'react';
import { TabBar } from 'antd-mobile';
import { history } from 'umi';
import {
  BsHouseDoorFill,
  BsHouseDoor,
  BsBagFill,
  BsBag,
  BsPersonFill,
  BsPerson,
} from 'react-icons/bs';
import { IMenuBarProps } from '@/interface';

import './index.less';

const MenuBar: FC<IMenuBarProps> = props => {
  const { show, pathname } = props;
  const items = [
    {
      title: '首页',
      selectedIcon: <BsHouseDoorFill style={{ fontSize: '1.5rem' }} />,
      icon: <BsHouseDoor style={{ fontSize: '1.5rem' }} />,
      link: '/',
    },
    {
      title: '订单',
      selectedIcon: <BsBagFill style={{ fontSize: '1.5rem' }} />,
      icon: <BsBag style={{ fontSize: '1.5rem' }} />,
      link: '/order',
    },
    {
      title: '我的',
      selectedIcon: <BsPersonFill style={{ fontSize: '1.5rem' }} />,
      icon: <BsPerson style={{ fontSize: '1.5rem' }} />,
      link: '/user',
    },
  ];
  return (
    <div className="menu-bar">
      <TabBar hidden={!show}>
        {items.map(item => (
          <TabBar.Item
            key={item.link}
            title={item.title}
            icon={item.icon}
            selectedIcon={item.selectedIcon}
            selected={pathname === item.link}
            onPress={() => history.push(item.link)}
          />
        ))}
      </TabBar>
    </div>
  );
};

MenuBar.defaultProps = {
  show: false,
  pathname: '',
};

export default MenuBar;
